<template>
  <div class="menufootSet">
    <el-checkbox v-model="isChecked" size="small" @change="handleIsChecked">手机端底部菜单组件</el-checkbox>
     <div class="btn-set-u" v-if="isChecked" @click="editorComponentFixed">【设置】</div>
  </div>
</template>
<script>
// import * as WindowType from '@/config/windowtype.js'
// import VueFunctions from '@/core/VueFunctions.js'
import { mapState } from 'vuex'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import * as PubsubType from '@/config/pubsubtype.js'
import PubSub from 'pubsub-js'
// import _ from 'lodash'

export default {
  props: {
    close: {
      type: Function,
      default: () => { }
    }
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  data () {
    return {
      isChecked: false,
      bjComponent: null
    }
  },
  created () {
  },
  methods: {
    show () {
      this.bjComponent = BackendjsFunctions.getComponentMenuFootfixed()
      if (this.bjComponent.render.data.status === 1) {
        this.isChecked = true
      } else if (this.bjComponent.render.data.status === 0) {
        this.isChecked = false
      }
    },
    editorComponentFixed () {
      // 查看 iframe 是否存在，如果不存在直接return
      if (this.design.pageId < 1 || !this.design.pageId || !this.design.iframeSrc) {
        return
      }
      PubSub.publish(PubsubType.PUBSUB_CHANGE_DEVICE_EDITMENUFOOTFIXED, { device: 2 })
      this.close()
    },
    handleIsChecked () {
      if (this.isChecked) {
        this.bjComponent.render.data.status = 1
      } else {
        this.bjComponent.render.data.status = 0
      }
      BackendjsFunctions.saveComponentMenuFootfixed(this.bjComponent)
    }
  },
  components: {
  }
}
</script>
<style scoped lang="scss">
.menufootSet {
  position: relative;
  line-height: 2;
  margin-bottom: 5px;
  .btn-set-u {
    position: absolute;
    right:0;
    top: 0;
    cursor: pointer;
    &:hover {
      color:#258FFB;
    }
  }
}
</style>
